<template>
  <div>
    <div style="margin-bottom:12px">
      <el-button size="mini" icon="el-icon-circle-plus-outline" type="primary" @click="addstudent()">添加学员</el-button>
      <el-button size="mini" type="warning" :loading="btnDownLoading" @click="exportstudent()">导出学员列表</el-button>
      <el-button size="mini" type="danger" @click="closestudent()">批量删除</el-button>
    </div>
    <div>
      <el-table ref="tableselect" v-loading="tableLoading" class="gl_table_noBorder" :row-key="(row)=> {return row.id}" :data="tableData" @selection-change="selectIon">
        <el-table-column type="selection" label-class-name="selection" :reserve-selection="true" width="55" />
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="性别" align="center">
          <template slot-scope="{row}">
            <span>{{ row.genderName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" prop="phoneNumber" />
        <el-table-column label="消耗课次" align="center">
          <template slot-scope="{ row }">
            {{ row.usedClassPeriod ? row.usedClassPeriod : '--' }}
          </template>
        </el-table-column>
        <el-table-column label="课时汇总">
          <template slot-scope="{ row }">
            <span>
              {{ row.remainClassPeriod?row.remainClassPeriod:'--' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="最长有效期" min-width="120">
          <template slot-scope="{ row }">
            <span v-if="row.effectiveDate">
              {{ row.effectiveDate | FormatDate('yyyy-MM-dd HH:mm:ss') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="到课" prop="presentCount" align="center" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="mini" type="text" @click="clastudent(row)">换班</el-button>
            <el-button size="mini" type="text" style="color:#FFBA00" @click="deleteStudent(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 更换班级 -->
    <el-dialog
      title="更换班级"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="632px"
      top="25vh"
    >
      <el-scrollbar>
        <span style="margin-right:15px">目标班级</span>
        <el-select v-model="classId">
          <el-option v-for="(item, index) in classList" :key="index" :value="item.id" :label="item.name" />
        </el-select>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button size="mini" @click="dialogVisible = false ">{{ $t('button.cancel') }}</el-button>
        <!-- 编辑的保存按钮 -->
        <el-button size="mini" type="primary" :loading="relclass" @click="reClass">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加学员 -->
    <el-dialog
      title="添加学员"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogStudentVisible"
      :close-on-click-modal="false"
      width="1032px"
      top="25vh"
    >
      <el-scrollbar>
        <p>学生姓名</p>
        <el-input v-model="Api_GET_ClubStudentClassNotExitStudentListQO.StudentName" size="mini" clearable placeholder="请输入学员名称" prefix-icon="el-icon-search" style="margin-bottom:15px;border-radio:20px;overflow:hidden;width:180px" @change="getstudentlist()" />
        <el-scrollbar>
          <el-table ref="multipleTable" v-loading="tableLoading1" size="mini" :row-key="getRowKeys" class="gl_table_noBorder" :data="studentTable" @selection-change="select">
            <el-table-column type="selection" label-class-name="selection" :reserve-selection="true" />
            <el-table-column label="学生姓名" prop="name" />
            <el-table-column label="证件号码" prop="idCardNumber" />
            <el-table-column label="性别">
              <template slot-scope="{ row }">
                <span>
                  <span v-if=" row.genderCode">{{ row.genderCode&&row.genderCode==='M'?'男':'女' }}</span>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="gl_pt_20" style="text-align: right;">
            <el-pagination
              :current-page="Api_GET_ClubStudentClassNotExitStudentListQO.Page"
              :page-size="Api_GET_ClubStudentClassNotExitStudentListQO.MaxResultCount"
              :total="totalPage1"
              layout="total,sizes,prev,pager,next,jumper"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="sizeChange1"
              @current-change="pageIndexChange1"
            />
          </el-row>
        </el-scrollbar>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button size="mini" @click="dialogStudentVisible = false">{{ $t('button.cancel') }}</el-button>
        <!-- 编辑的保存按钮 -->
        <el-button size="mini" type="primary" :loading="relclass" @click="reStudent">确 定</el-button>
      </span>
    </el-dialog>
    <el-row class="gl_pt_20" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubClassStudentsInClassQO.Page"
        :page-size="Api_GET_ClubClassStudentsInClassQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import { api_GET_ClubClassNotExistedStudentClassStudentId, api_GET_ClubStudentClassNotExitStudentList, api_DELETE_ClubClassStudentList, api_GET_ClubClassStudentsInClass, api_DELETE_ClubClassStudentId, api_PUT_ClubClassStudentId, api_POST_ClubClassStudent } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubStudentClassNotExitStudentListQO, Api_DELETE_ClubClassStudentListQO, Api_GET_ClubClassQO, CreateClassStudentInput, Api_GET_ClubStudentQO, Api_GET_ClubClassStudentsInClassQO } from '@/lib/form/hall/swaggerForm';
export default {
  data() {
    return {
      btnDownLoading: false,
      dstudentsld: [], // 删除学员的id
      page: 1,
      flag: true,
      relclass: false,
      tableLoading1: false,
      Api_GET_ClubStudentQOname: '',
      studentsld: [],
      tableLoading: false,
      GetStudentInput: {},
      releclassId: '',
      dialogStudentVisible: false,
      studentTable: [],
      Api_DELETE_ClubClassStudentListQO: new Api_DELETE_ClubClassStudentListQO(),
      Api_GET_ClubStudentQO: new Api_GET_ClubStudentQO(),
      Api_GET_ClubStudentClassNotExitStudentListQO: new Api_GET_ClubStudentClassNotExitStudentListQO(),
      studentId: '',
      classList: [],
      classId: '', // 目标班级id
      tableData: [],
      totalPage: 0,
      totalPage1: 0,
      currentPage: 1,
      currentPage1: 1,
      Api_GET_ClubClassQO: new Api_GET_ClubClassQO(),
      Api_GET_ClubClassStudentsInClassQO: new Api_GET_ClubClassStudentsInClassQO(),
      CreateClassStudentInput: new CreateClassStudentInput(),
      freeDay: [],
      dialogVisible: false
    };
  },
  created() {
    this.getStudent();
  },
  methods: {
    getRowKeys(row) {
      return row.id;
    },
    selectIon(val) {
      if (this.flag) {
        this.dstudentsld = [];
        if (val.length > 0) {
          val.forEach(item => {
            if (item.id) {
              this.dstudentsld.push(item.id);
            }
          });
        }
      }
    },
    select(val) {
      if (this.flag) {
        this.studentsld = [];
        if (val.length > 0) {
          val.forEach(item => {
            if (item.id) {
              this.studentsld.push(item.id);
            }
          });
        }
      }
    },
    changeProportion(val) {
      this.Api_GET_ClubClassStudentsInClassQO.StartTime = val[0];
      this.Api_GET_ClubClassStudentsInClassQO.EndTime = val[1];
      this.getStudent();
    },
    // 获取班级学员列表
    getStudent(page) {
      this.$nextTick(() => {
        this.$refs.tableselect.clearSelection();
      });
      this.Api_GET_ClubClassStudentsInClassQO.Sorting = 'classStudents.Min(creationTime) DESC';
      this.Api_GET_ClubClassStudentsInClassQO.Page = page || 1;
      this.Api_GET_ClubClassStudentsInClassQO.SkipCount = (this.Api_GET_ClubClassStudentsInClassQO.Page - 1) * this.Api_GET_ClubClassStudentsInClassQO.MaxResultCount;
      this.Api_GET_ClubClassStudentsInClassQO.ClassId = this.$route.query.id;
      this.Api_GET_ClubClassStudentsInClassQO.IsEnable = ''; // type: boolean
      this.Api_GET_ClubClassStudentsInClassQO.IncludeStudentContacts = true; // type: boolean
      this.Api_GET_ClubClassStudentsInClassQO.IncludeGender = true; // type: boolean
      this.Api_GET_ClubClassStudentsInClassQO.IncludeIdCardType = true; // type: boolean
      this.Api_GET_ClubClassStudentsInClassQO.IncludeStudentMembershipCards = true; // type: boolean
      this.Api_GET_ClubClassStudentsInClassQO.IncludeStudentCoachs = true; // type: boolean
      this.Api_GET_ClubClassStudentsInClassQO.IncludeClassStudents = true; // type: boolean
      api_GET_ClubClassStudentsInClass(this.Api_GET_ClubClassStudentsInClassQO).then(res => {
        console.log(res);
        this.tableData = res.items;
        this.totalPage = res.totalCount;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    clastudent(row) {
      this.classId = '';
      this.studentId = row.studentId;
      this.dialogVisible = true;
      this.releclassId = row.id;
      this.dialogVisible = true;
      // 获取班级列表
      api_GET_ClubClassNotExistedStudentClassStudentId(row.studentId).then(res => {
        console.log(res);
        this.tableLoading = false;
        this.classList = res;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 删除班级
    deleteStudent(row) {
      console.log(row);
      var that = this;
      this.$confirm(`您确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api_DELETE_ClubClassStudentId(row.id).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            that.$parent.$parent.$parent.init();
            that.getStudent(this.Api_GET_ClubClassStudentsInClassQO.Page);
          }, error => {
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        });
    },
    // 更换班级
    reClass(row) {
      this.relclass = true;
      this.CreateClassStudentInput.classId = this.classId;
      this.CreateClassStudentInput.studentId = this.studentId;
      if (this.classId === '') {
        this.relclass = false;
        this.$message('请选择班级');
        return;
      }
      api_PUT_ClubClassStudentId(this.releclassId, this.CreateClassStudentInput).then(res => {
        this.$message({
          message: '更换成功',
          type: 'success'
        });
        this.$parent.$parent.$parent.init();
        this.getStudent(this.Api_GET_ClubClassStudentsInClassQO.Page);
        this.dialogVisible = false;
        this.classId = '';
        this.relclass = false;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.relclass = false;
      });
    },
    // 添加学员
    addstudent() {
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection();
      });
      this.flag = true;
      this.Api_GET_ClubStudentClassNotExitStudentListQO = new Api_GET_ClubStudentClassNotExitStudentListQO();
      this.dialogStudentVisible = true;
      this.CreateClassStudentInput.classId = this.$route.query.id;
      this.studentId = [];
      this.getstudentlist();
    },
    getstudentlist(page) {
      this.$nextTick(() => {
        this.$refs.tableselect.clearSelection();
      });
      this.tableLoading1 = true;
      this.Api_GET_ClubStudentClassNotExitStudentListQO.Page = page || 1;
      this.Api_GET_ClubStudentClassNotExitStudentListQO.SkipCount = (this.Api_GET_ClubStudentClassNotExitStudentListQO.Page - 1) * this.Api_GET_ClubStudentClassNotExitStudentListQO.MaxResultCount;
      this.Api_GET_ClubStudentClassNotExitStudentListQO.IsEnable = true;
      this.Api_GET_ClubStudentClassNotExitStudentListQO.ClassId = this.$route.query.id;
      this.Api_GET_ClubStudentQO.IncludeStudentContacts = true;
      this.Api_GET_ClubStudentQO.IncludeGender = true;
      this.Api_GET_ClubStudentQO.IncludeIdCardType = true;
      this.Api_GET_ClubStudentQO.IncludeStudentMembershipCards = true;
      this.Api_GET_ClubStudentQO.IncludeStudentCoachs = true;
      this.Api_GET_ClubStudentQO.IncludeClassStudents = true;
      api_GET_ClubStudentClassNotExitStudentList(this.Api_GET_ClubStudentClassNotExitStudentListQO).then((res) => {
        this.tableLoading1 = false;
        this.studentTable = res.items;
        this.totalPage1 = res.totalCount;
        this.flag = true;
      }, error => {
        this.tableLoading1 = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    reStudent() {
      this.relclass = true;
      this.CreateClassStudentInput.studentsId = this.studentsld;
      if (this.studentsld.length === 0) {
        this.$message('请选择学员');
        this.relclass = false;
        return;
      }
      api_POST_ClubClassStudent(this.CreateClassStudentInput).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
        this.relclass = false;
        this.getStudent(this.Api_GET_ClubClassStudentsInClassQO.Page);
        this.studentsld = [];
        this.dialogStudentVisible = false;
        this.$parent.$parent.$parent.init();
      }, error => {
        this.relclass = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubClassStudentsInClassQO.MaxResultCount = MaxResultCount;
      this.getStudent();
    },
    pageIndexChange(currentPage) {
      this.getStudent(currentPage);
    },
    sizeChange1(MaxResultCount) {
      this.Api_GET_ClubStudentClassNotExitStudentListQO.MaxResultCount = MaxResultCount;
      this.getstudentlist();
    },
    pageIndexChange1(currentPage) {
      this.page = currentPage;
      console.log(this.page);
      this.flag = false;
      this.getstudentlist(currentPage);
    },
    // 导出
    exportstudent() {
      this.GetStudentInput.Page = this.Api_GET_ClubClassStudentsInClassQO.Page;
      this.GetStudentInput.SkipCount = (this.Api_GET_ClubClassStudentsInClassQO.Page - 1) * this.Api_GET_ClubClassStudentsInClassQO.MaxResultCount;
      this.GetStudentInput.Sorting = 'classStudents.Min(creationTime) DESC';
      this.GetStudentInput.IsEnable = this.Api_GET_ClubClassStudentsInClassQO.IsEnable;
      this.GetStudentInput.ClassId = this.$route.query.id;
      this.GetStudentInput.IncludeStudentContacts = true;
      this.GetStudentInput.IncludeGender = true;
      this.GetStudentInput.IncludeIdCardType = true;
      this.GetStudentInput.IncludeStudentMembershipCards = true;
      this.GetStudentInput.IncludeStudentCoachs = true;
      this.GetStudentInput.IncludeClassStudents = true;
      this.GetStudentInput = JSON.stringify(this.GetStudentInput);
      this.btnDownLoading = true;
      var that = this;
      const tempUrl = `/api/excel`;
      const fileName = '学员' + '.xlsx';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { ReportName: 'StudentsInClass', GetClassStudentInput: this.GetStudentInput }, WEB_CONFIG.VUE_APP_SWAGGER_HALL_BASE).then(res => {
        this.btnDownLoading = false;
        this.GetStudentInput = {};
      }).catch(error => {
        this.btnDownLoading = false;
        this.GetStudentInput = {};
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    closestudent() {
      console.log([...this.dstudentsld]);
      this.Api_DELETE_ClubClassStudentListQO.ids = [...this.dstudentsld];
      if (this.Api_DELETE_ClubClassStudentListQO.ids.length === 0) {
        this.$message({
          message: '请选择学员',
          type: 'warning'
        });
        return;
      }
      this.$confirm(`您确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api_DELETE_ClubClassStudentList(this.Api_DELETE_ClubClassStudentListQO).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.$parent.$parent.$parent.init();
          this.getStudent(this.Api_GET_ClubClassStudentsInClassQO.Page);
        }, error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      });
    }
  }

};
</script>

<style lang="scss" scoped>
.date {
    color: black;
    opacity: 65%;
}
</style>

